<!DOCTYPE html>
<html>
<head>
    <title>DataFrame差异报告</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .section { margin-bottom: 40px; border: 1px solid #ddd; border-radius: 5px; padding: 20px; background: #f9f9f9; }
        .section h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 2px solid #eee; color: #333; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #4CAF50; color: white; font-weight: bold; }
        tr:nth-child(even) { background-color: #f2f2f2; }
        .diff-old { background-color: #ffcccc; font-weight: bold; }
        .diff-new { background-color: #ccffcc; font-weight: bold; }
        .pagination { margin-top: 15px; display: flex; justify-content: center; }
        .page-btn {
            margin: 0 5px;
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .page-btn:hover { background: #45a049; }
        .page-btn.active { background: #2E7D32; font-weight: bold; }
        .page-info { text-align: center; margin-bottom: 15px; color: #666; font-style: italic; }
        .modified-row {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .modified-header {
            background: #e3f2fd;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-weight: bold;
            color: #1565C0;
        }
        .tab-container { display: flex; margin-bottom: 15px; }
        .tab-btn {
            padding: 8px 20px;
            background: #bbdefb;
            border: none;
            cursor: pointer;
            font-weight: bold;
            color: #0d47a1;
        }
        .tab-btn:first-child { border-radius: 4px 0 0 4px; }
        .tab-btn:last-child { border-radius: 0 4px 4px 0; }
        .tab-btn.active { background: #64b5f6; color: white; }
        .no-changes { text-align: center; color: #757575; font-style: italic; padding: 20px; }
        .summary-bar {
            background: #e8f5e9;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-weight: bold;
            color: #2E7D32;
        }
    </style>
    <script>
        function showPage(section, pageIndex) {
            // 隐藏该部分的所有页面
            const pages = document.querySelectorAll(`#${section}-section .page-content`);
            pages.forEach(page => page.style.display = 'none');

            // 移除所有按钮的active类
            const btns = document.querySelectorAll(`#${section}-section .page-btn`);
            btns.forEach(btn => btn.classList.remove('active'));

            // 显示选中的页面
            pages[pageIndex].style.display = 'block';
            btns[pageIndex].classList.add('active');
        }

        function showTab(rowId, tabType) {
            // 隐藏该行的所有标签内容
            const oldContent = document.getElementById(`old-${rowId}`);
            const newContent = document.getElementById(`new-${rowId}`);
            oldContent.style.display = 'none';
            newContent.style.display = 'none';

            // 移除按钮active类
            document.getElementById(`old-btn-${rowId}`).classList.remove('active');
            document.getElementById(`new-btn-${rowId}`).classList.remove('active');

            // 显示选中的标签
            if (tabType === 'old') {
                oldContent.style.display = 'block';
                document.getElementById(`old-btn-${rowId}`).classList.add('active');
            } else {
                newContent.style.display = 'block';
                document.getElementById(`new-btn-${rowId}`).classList.add('active');
            }
        }

        // 初始化页面显示
        window.onload = function() {
            // 为每个部分激活第一页按钮
            const sections = ['added', 'deleted', 'modified'];
            sections.forEach(section => {
                const pages = document.querySelectorAll(`#${section}-section .page-content`);
                if (pages.length > 0) {
                    // 只设置按钮状态，内容已默认显示
                    const firstBtn = document.querySelector(`#${section}-section .page-btn:first-child`);
                    if (firstBtn) {
                        firstBtn.classList.add('active');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <h1 style="text-align: center; color: #2E7D32;">DataFrame差异分析报告</h1>

    <!-- 新增行部分 -->
    <div class="section" id="added-section">
        <h2>新增行 ({{ results.added.total }})</h2>
        {% if results.added.total > 0 %}
            <div class="summary-bar">
                共发现 {{ results.added.total }} 条新增记录
            </div>

            {% for page in results.added.pages %}
            <div class="page-content" id="added-page-{{ loop.index }}"
                 {% if loop.first %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                <div class="page-info">
                    显示第 {{ page.start_index }} - {{ page.end_index }} 条记录（共 {{ results.added.total }} 条）
                </div>
                <table>
                    <thead>
                        <tr>
                            {% for col in columns %}
                            <th>{{ col }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in page.data %}
                        <tr>
                            {% for col in columns %}
                            <td>{{ row[col] }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endfor %}

            <div class="pagination">
                {% for page in results.added.pages %}
                <button class="page-btn {% if loop.first %}active{% endif %}"
                        onclick="showPage('added', {{ loop.index0 }})">
                    {{ loop.index }}
                </button>
                {% endfor %}
            </div>
        {% else %}
            <div class="no-changes">无新增记录</div>
        {% endif %}
    </div>

    <!-- 删除行部分 -->
    <div class="section" id="deleted-section">
        <h2>删除行 ({{ results.deleted.total }})</h2>
        {% if results.deleted.total > 0 %}
            <div class="summary-bar">
                共发现 {{ results.deleted.total }} 条删除记录
            </div>

            {% for page in results.deleted.pages %}
            <div class="page-content" id="deleted-page-{{ loop.index }}"
                 {% if loop.first %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                <div class="page-info">
                    显示第 {{ page.start_index }} - {{ page.end_index }} 条记录（共 {{ results.deleted.total }} 条）
                </div>
                <table>
                    <thead>
                        <tr>
                            {% for col in columns %}
                            <th>{{ col }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in page.data %}
                        <tr>
                            {% for col in columns %}
                            <td>{{ row[col] }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endfor %}

            <div class="pagination">
                {% for page in results.deleted.pages %}
                <button class="page-btn {% if loop.first %}active{% endif %}"
                        onclick="showPage('deleted', {{ loop.index0 }})">
                    {{ loop.index }}
                </button>
                {% endfor %}
            </div>
        {% else %}
            <div class="no-changes">无删除记录</div>
        {% endif %}
    </div>

    <!-- 修改行部分 -->
    <div class="section" id="modified-section">
        <h2>修改行 ({{ results.modified.total }})</h2>
        {% if results.modified.total > 0 %}
            <div class="summary-bar">
                共发现 {{ results.modified.total }} 条修改记录
            </div>

            {% for page in results.modified.pages %}
            <div class="page-content" id="modified-page-{{ loop.index }}"
                 {% if loop.first %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                <div class="page-info">
                    显示第 {{ page.start_index }} - {{ page.end_index }} 条记录（共 {{ results.modified.total }} 条）
                </div>

                {% for item in page.data %}
                <div class="modified-row">
                    <div class="modified-header">
                        修改记录 - 关键值: {{ item.key }}
                    </div>

                    <div class="tab-container">
                        <button id="old-btn-{{ loop.index }}" class="tab-btn active"
                                onclick="showTab('{{ loop.index }}', 'old')">
                            原始值
                        </button>
                        <button id="new-btn-{{ loop.index }}" class="tab-btn"
                                onclick="showTab('{{ loop.index }}', 'new')">
                            修改后值
                        </button>
                    </div>

                    <div id="old-{{ loop.index }}" style="display: block;">
                        <table>
                            <thead>
                                <tr>
                                    {% for col in columns %}
                                    <th>{{ col }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    {% for col in columns %}
                                    <td class="{% if col in item.diff_cols %}diff-old{% endif %}">
                                        {{ item.old[col] }}
                                    </td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="new-{{ loop.index }}" style="display: none;">
                        <table>
                            <thead>
                                <tr>
                                    {% for col in columns %}
                                    <th>{{ col }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    {% for col in columns %}
                                    <td class="{% if col in item.diff_cols %}diff-new{% endif %}">
                                        {{ item.new[col] }}
                                    </td>
                                    {% endfor %}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endfor %}

            <div class="pagination">
                {% for page in results.modified.pages %}
                <button class="page-btn {% if loop.first %}active{% endif %}"
                        onclick="showPage('modified', {{ loop.index0 }})">
                    {{ loop.index }}
                </button>
                {% endfor %}
            </div>
        {% else %}
            <div class="no-changes">无修改记录</div>
        {% endif %}
    </div>
</body>
</html>